<template>
  <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
    <div class="infoModal">平安监控</div>
    <a-form-model
      style="margin-right:10px"
      ref="ruleForm"
      :rules="rules"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="formVideoModel"
    >
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="项目名称" ref="projectName" prop="projectName">
            <a-select v-model="form.projectName" placeholder="请选择项目名称">
              <a-select-option value="平安一期">平安一期</a-select-option>
              <a-select-option value="平安二期">平安二期</a-select-option>
              <a-select-option value="平安三期">平安三期</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item ref="country" label="区县" prop="country" v-if="showCountry">
            <CountySelect :form.sync="form" @update="validateField"></CountySelect>
          </a-form-model-item>
          <a-form-model-item label="区县" v-if="!showCountry">
            <a-select v-model="form.country" :disabled="true"></a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="维护等级" ref="level" prop="level">
            <a-select v-model="form.level" placeholder="请选择维护等级">
              <a-select-option value="普通">普通</a-select-option>
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="AA">AA</a-select-option>
              <a-select-option value="AAA">AAA</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="资管编号">
            <a-input v-model="form.number" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="派出所" ref="police" prop="police">
            <a-input v-model="form.police" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="点位名称" ref="siteName" prop="siteName">
            <a-input v-model="form.siteName" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="点位编号" ref="siteNo" prop="siteNo">
            <a-input v-model="form.siteNo" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="立杆类型" ref="poleType" prop="poleType">
            <a-select v-model="form.poleType" placeholder="请选择立杆类型">
              <a-select-option value="探头">探头</a-select-option>
              <a-select-option value="WIFI">WIFI</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="利旧杆编号" ref="poleNo" prop="poleNo">
            <a-select v-model="form.poleNo" placeholder="请选择利旧杆编号">
              <a-select-option value="立杆">立杆</a-select-option>
              <a-select-option value="借墙">借墙</a-select-option>
              <a-select-option value="借杆">借杆</a-select-option>
              <a-select-option value="立旧杆">立旧杆</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="探头数量" ref="camera" prop="camera">
            <a-input v-model="form.camera" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="上联OLT" ref="olt" prop="olt">
            <a-input v-model="form.olt" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="跳纤路由" ref="route" prop="route">
            <a-input v-model="form.route" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="第一跳光交名称" ref="lightCross" prop="lightCross">
            <a-input v-model="form.lightCross" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="infoModal">探头设备</div>
        </a-col>
        <a-button @click="addTantou" style="margin: 0px 0 10px 20px" type="primary">添加探头</a-button>
        <a-table
          :pagination="false"
          style="margin:0 20px 0 20px"
          :loading="tableLoading"
          :columns="probeColumns"
          :data-source="probeData"
          bordered
          size="middle"
        >
          <template slot="action" slot-scope="text, record">
            <a v-if="record.key > 1" @click="deleteTantou(record.key)">移除</a>
          </template>

          <template slot="equipmentFactory" slot-scope="text, record">
            <a-input v-model="record.equipmentFactory" />
          </template>

          <template slot="electricPoleNo" slot-scope="text, record">
            <a-input v-model="record.electricPoleNo" />
          </template>
          <template slot="equipmentModel" slot-scope="text, record">
            <a-input v-model="record.equipmentModel" />
          </template>

          <template slot="equipmentType" slot-scope="text, record">
            <a-select v-model="record.equipmentType" placeholder="请选择设备类型">
              <a-select-option value="枪机">枪机</a-select-option>
              <a-select-option value="球机">球机</a-select-option>
              <a-select-option value="WIFI">WIFI</a-select-option>
            </a-select>
          </template>
          <template slot="electric" slot-scope="text, record">
            <a-select v-model="record.electric" placeholder="请选择取电信息">
              <a-select-option value="市电">市电</a-select-option>
              <a-select-option value="客户自备">客户自备</a-select-option>
              <a-select-option value="三方">三方</a-select-option>
              <a-select-option value="利旧杆引电">利旧杆引电</a-select-option>
            </a-select>
          </template>
        </a-table>
      </a-row>

      <a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
        <a-button style="margin-left: 10px;" @click="cancelEvent">
          取消
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import { addMonitor } from '@/api/video'
import CountySelect from '@/views/videoManage/util/countySelect'
import { ACCESS_TOKEN, ROLE_NAME, USERINFO } from '@/store/mutation-types'
export default {
  components: { CountySelect },
  data() {
    return {
      showCountry: true,
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      form: {},
      tableLoading: false,
      probeData: [],
      probeColumns,
      rules: {
        country: [{ required: true, message: '请选择区县', trigger: 'change' }],
        camera: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        electric: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        electricPoleNo: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        equipmentFactory: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        equipmentModel: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        equipmentType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        level: [{ required: true, message: '请选择维护等级', trigger: 'change' }],
        lightCross: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        number: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        olt: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        poleNo: [{ required: true, message: '请选择编号', trigger: 'change' }],
        equipmentType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        poleType: [{ required: true, message: '请选择立杆类型', trigger: 'change' }],
        police: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        projectName: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
        route: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        siteName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        siteNo: [{ required: true, message: '请输入完整', trigger: 'blur' }],

        customerMobile: [
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) }
        ]
      }
    }
  },
  created() {
    if (Vue.ls.get(ROLE_NAME) == '区县公司') {
      this.form.country = Vue.ls.get(USERINFO).belong
      this.showCountry = false
    } else if (Vue.ls.get(ROLE_NAME) == '市公司') {
    } else if (Vue.ls.get(ROLE_NAME) == '代维单位') {
      this.form.country = Vue.ls.get(USERINFO).belong
      this.form.memberId = Vue.ls.get(USERINFO).id
      this.showCountry = false
    } else if (Vue.ls.get(ROLE_NAME) == '管理员') {
    }
    this.getVideoByIdFunction()
  },
  methods: {
    //默认添加一行数组
    getVideoByIdFunction() {
      let probeInfo = {}
      probeInfo.equipmentFactory = ''
      probeInfo.electricPoleNo = ''
      probeInfo.equipmentModel = ''
      probeInfo.key = 1
      this.probeData.push(probeInfo)
    },
    //手动再验证
    validateField(e) {
      this.form.country = e
      this.$refs.ruleForm.validateField('country')
    },
    //删除探头
    deleteTantou(e) {
      this.probeData.splice(
        this.probeData.findIndex(item => item.key === e),
        1
      )
    },
    //添加探头
    addTantou() {
      let timestamp = new Date().getTime()
      let probeInfo = {}
      probeInfo.key = timestamp
      this.probeData.push(probeInfo)
    },
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let timestamp = Date.parse(new Date())
          let probeData = this.probeData
          let probeInfoData = []
          for (let i = 0; i < probeData.length; i++) {
            if (i > 0) {
              let storageInfo = {}
              storageInfo.equipmentFactory = probeData[i].equipmentFactory
              storageInfo.electricPoleNo = probeData[i].electricPoleNo
              storageInfo.equipmentModel = probeData[i].equipmentModel
              storageInfo.equipmentType = probeData[i].equipmentType
              storageInfo.electric = probeData[i].electric
              storageInfo.key = timestamp
              probeInfoData.push(storageInfo)
            } else {
              this.form.equipmentFactory = probeData[i].equipmentFactory
              this.form.electricPoleNo = probeData[i].electricPoleNo
              this.form.equipmentModel = probeData[i].equipmentModel
              this.form.equipmentType = probeData[i].equipmentType
              this.form.electric = probeData[i].electric
            }
          }
          let skuInfo = {}
          skuInfo.probeData = probeInfoData
          this.form.storeSku = JSON.stringify(skuInfo)
          addMonitor(this.form).then(response => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '添加成功!',
                  duration: 3
                })
                this.$emit('successEvent')
              }
            }
          })
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    }
  }
}

const probeColumns = [
  {
    title: '设备厂家',
    dataIndex: 'equipmentFactory',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentFactory' }
  },
  {
    title: '设备型号',
    dataIndex: 'equipmentModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentModel' }
  },
  {
    title: '设备类型',
    dataIndex: 'equipmentType',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentType' }
  },
  {
    title: '取电信息',
    dataIndex: 'electric',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'electric' }
  },
  {
    title: '利旧引电杆编号',
    dataIndex: 'electricPoleNo',
    align: 'center',
    scopedSlots: { customRender: 'electricPoleNo' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
</script>
